<!--四城联创周工作报表-->
<template>
  <div class="public-common">
    <div class="public-title">四城联创工作周报表</div>
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称">
            <el-input v-model="form.ming" placeholder="请输入搜索关键词进行快速搜索"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" icon="el-icon-search" style="margin-left:10px;">搜索</el-button>
          <el-button type="primary" icon="el-icon-tickets" @click="dialogVisible=true">新建</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tabledata" size="mini" border stripe header-row-class-name="textcenter">
      <el-table-column label="本周开始时间" fixed="left" prop="a1">
      </el-table-column>
      <el-table-column label="本周结束时间" prop="a2">
      </el-table-column>
      <el-table-column label="本周工作进度" prop="a3">
      </el-table-column>
      <el-table-column label="下周开始时间" prop="a4">
      </el-table-column>
      <el-table-column label="下周结束时间" prop="a5">
      </el-table-column>
      <el-table-column label="下周工作安排" prop="a6">
      </el-table-column>
      <el-table-column label="上报时间" prop="a7">
      </el-table-column>
      <el-table-column label="上报人" prop="a8">
      </el-table-column>
      <el-table-column label="状态" prop="a9">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.now"
      :page-sizes="page.sizes" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
      style="margin-top:10px;">
    </el-pagination>
    <el-dialog title="四城联创工作周报表" :visible.sync="dialogVisible" width="80%">
      <el-form :model="editForm" ref="editForm" label-width="80px" class="qysb-form-f">
        <el-scrollbar style="height:100%;">
          <div class="fuwukab" style="color: #d21706; background:none; margin-bottom: 0;">上报时间为每周五至下周一，驳回上报可延迟至下周三。</div>
          <div class="fuwukab">出租汽车行业四城联创工作周报表</div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="本周工作进度" class="cyqlabel">
                <el-date-picker style="width: 200px;" placeholder="请选择开始时间" format="yyyy/MM/dd" value-format="yyyy/MM/dd" v-model="editForm.four1" type="date"></el-date-picker>
                <el-date-picker style="width: 200px;" placeholder="请选择结束时间" format="yyyy/MM/dd" value-format="yyyy/MM/dd" v-model="form.four2" type="date"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="本周工作内容" class="cyqlabel">
                <el-input size="small" type="textarea" v-model="editForm.four3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="下周工作安排" class="cyqlabel">
                <el-date-picker style="width: 200px;" placeholder="请选择开始时间" format="yyyy/MM/dd" value-format="yyyy/MM/dd" v-model="form.four4" type="date"></el-date-picker>
                <el-date-picker style="width: 200px;" placeholder="请选择结束时间" format="yyyy/MM/dd" value-format="yyyy/MM/dd" v-model="form.four5" type="date"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="本周工作内容" class="cyqlabel">
                <el-input size="small" type="textarea" v-model="editForm.four6"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <div style="text-align:center;margin-top:6px;">
            <el-button type="primary" @click="">确认</el-button>
            <el-button type="primary" @click="">上报</el-button>
            <el-button type="info" size="small" @click="dialogVisible=false">取消</el-button>
          </div>
        </el-scrollbar>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        tabledata: [
          {
              a1: '2018-10-1',
              a2: '2018-10-7',
              a3: '85%',
              a4: '2018-10-10',
              a5: '2018-10-16',
              a6: '整体规划租车章程',
              a7: '2018-10-16',
              a8: '丁建国',
              a9: '已上报',
          },
          {
              a1: '2018-11-1',
              a2: '2018-11-7',
              a3: '95%',
              a4: '2018-11-10',
              a5: '2018-11-16',
              a6: '租车章程下发工作安排',
              a7: '2018-11-16',
              a8: '丁建国',
              a9: '已上报',
          },
          {
              a1: '2018-12-1',
              a2: '2018-12-7',
              a3: '75%',
              a4: '2018-12-10',
              a5: '2018-12-16',
              a6: '跟车执行',
              a7: '2018-12-16',
              a8: '丁建国',
              a9: '已上报',
          },
        ],
        page: {
          now: 1,
          pagesize: 10,
          sizes: [2, 10, 20, 50, 100],
          total: 0,
          key: ''
        },
        form: {
          yue: '',
          ming: ''
        },
        editForm: {
          four1: '',
          four2: '',
          four3: '',
          four4: '',
          four5: '',
          four6: '',

        }
      }
    },
    methods: {
      //分页
      handleSizeChange(pagesize) {
        this.page.pagesize = pagesize;
        this.search(true, true);
      },
      handleCurrentChange(pageno) {
        this.page.now = pageno;
        this.search(true, true);
      }

    }
  }
</script>

<style>
  .cyqlabel .el-form-item__label {
    width: 100px !important;
  }

  .cyqlabel .el-form-item__content {
    margin-left: 100px !important;
  }
  .public-common .el-form-item .el-input {
    width: 100%;
  }

  .public-title,
  .fuwukab {
    line-height: 30px;
    background-color: #deecfd;
    padding: 0 10px;
    margin-bottom: 20px;
    color: #15428F
  }

  .el-scrollbar__wrap {
    margin: 0 !important;
  }

  .el-dialog__body {
    padding: 10px 20px;
  }
</style>
